<template>
  <div v-show="route.meta.requiresAuth">
    <h1>pinia-{{ counterStore.count }}</h1>
    <h1>pinia计算-{{ counterStore.doubleCount }}</h1>
    <h2>{{ userStore.formatUser }}</h2>
    <button @click="userStore.changeUser()">修改</button>
    <button @click="counterStore.increment()">点击</button>
    <!-- 取出路由的元信息 -->
    <h1>{{ route.meta.title }}</h1>
    <h3>{{ route.meta.requiresAuth }}</h3>
    <!-- 路由跳转方法 -->
    <!-- 路由组件的标签元素跳转 -->
    <router-link :to="{ path: '/', query: { id: 1 } }">首页</router-link> |
    <router-link to="/about">关于</router-link> |
    <router-link to="/my">我的</router-link> |
    <router-link :to="{ name: 'method', state: { id: 2 } }">方法</router-link> |
    <router-link to="/page">页面</router-link>
    <!-- 事件方法跳转 -->
    <button @click="toPage">跳转页面</button>
  </div>

  <!-- 路由视图的占位 - 相当于每个页面的占位 -->
  <RouterView />

  <!-- 引入公共组件 -->
  <FooterCom v-show="route.meta.requiresAuth" />
</template>

<script lang="ts" setup>
import { watch } from "vue";
//引入路由的方法
import { useRouter, useRoute } from "vue-router";

//引入仓库store的对象方法
import { useCounterStore } from "./stores/counter";
import {useUserStore} from "./stores/user"
const counterStore = useCounterStore()
const userStore = useUserStore()

//不需要在引入footercom组件，因为它已经在全局注册,可以随意调用
// import FooterCom from "./components/FooterCom.vue";

//路由方法useRouter
const router = useRouter();
//路由配置useRoute
const route = useRoute();
//跳转我的页面
function toPage() {
  //path路径跳转
  //router.push("/my")
  //name名称跳转
  //router.push("method")
  //第一种跳转传参通过path路径及query
  //router.push({path:"/about",query:{name:1}})
  //第二种通过params - 一般用于vue2，目前vue3可以使用，但是不建议
  //第三种通过path路径或者name名称以及state传参（state是history的对象）
  router.push({ name: "my", state: { name: 2 } });

  //对比区别：
  //query传参：传递的参数默认显示在浏览器的url地址栏中，相对不安全,并且传递的数据类型默认转为字符串
  //state传参:传递的参数在浏览器的url地址栏看不到相对安全，并且传递的数据类型不会发生改变
  //所以穿普通数据使用query,加密数据用state

  //监听路由配置对象
  //     watch(()=>router.currentRoute.value.path,(value) =>{
  //       console.log("route:",value);
  //     },{
  //       deep:true,
  //       immediate:true
  //     })
}
</script>

<style lang="less" scoped>
button {
  color: red;
}
</style>
